<template>
  <div>
    <template v-for="item in this.menuList">
      <el-submenu :disabled="!item.available"
                  :index="item.id+''"
                  :key="item.id+''"
                  v-if="item.children.length>0"
                  class="border"
      style="font-size: 12px">
        <template slot="title">
          <i :class="item.icon"></i>
          <span slot="title">{{item.menuName}}</span>

        </template>
        <MenuTree :menuList="item.children"></MenuTree>
      </el-submenu>
      <el-menu-item v-else
                    :disabled="!item.available"
                    :index="item.url+''"
                    :route="item.url+''"
                    :key="item.id">
        <i :class="item.icon"></i>
        <span slot="title">{{item.menuName}}</span>
      </el-menu-item>
    </template>
  </div>
</template>

<script>
  export default {
    name: 'MenuTree',
    props: ['menuList'],
    methods: {},
  }
</script>

<style lang="less" scoped>
  .border:before {
    content: "";
    width: 90%;
    height: 1px;
    background: #cccccc;
    display: table;
    margin: 5% auto;
  }

  .el-menu-item {
    font-size: 12px;
    color: #303133;
    padding: 0 20px;
    cursor: pointer;
    transition: border-color .3s, background-color .3s, color .3s;
    box-sizing: border-box;
  }

  /deep/.el-submenu__title {
    font-size: 13px;
    color: #303133;
    padding: 0 20px;
    cursor: pointer;
    transition: border-color .3s, background-color .3s, color .3s;
    box-sizing: border-box;
    height: 40px;
    line-height: 40px;
    position: relative;
    -webkit-box-sizing: border-box;
    white-space: nowrap;
    list-style: none;
  }

  /*折叠后隐藏文字*/
  .el-menu--collapse .el-submenu__title span {
    display: none;
  }
</style>
